import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageLoading from '@/components/PageLoading';
import { Card, Button, Icon, Modal, message, Form, Input, Checkbox, Col, Row, Tag, Select, Radio, InputNumber,Table } from 'antd';
import styles from './index.less';
import Editor from '@/utils/Editor';

const { Option } = Select;
const formItemLayout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 20 },
};



class Item extends Component {
    constructor(props) {
        super(props);
        this.state = {
            values: [],
            slotIndex: "",
            itemIndex: "",
            index: "",
            slotArr: [],
            tableData:[ ]
        };
       
    }

    forMapSlotsOption = (option, type) => {
        switch (type) {
            case 'slot':
                return (
                    <Option key={option.slotId} value={option.slotId}>#{option.slotName}#</Option>
                );
            case 'api':
                return (
                    <Option key={option._id} value={option._id}>{option.name}</Option>
                );
            case 'field':
                return (
                    <Option key={option.id} value={option.id}>{option.name}</Option>
                );
            default:
                return ''
        }
    };

    addTableData=()=>{
      const {data,updata} = this.props;
      data.mapping.push({
        apiField: "",
        slotId: "",
        fieldType: ""
      });
      updata(data);
    };

    setValueByChange=(e,type,isInput)=>{
      console.log(e,type,'---------------');
      const {data,getApiDetail,updata} = this.props;
      if(isInput){
        if(type==='multiResultTitle'){
          data.resultTitle.multiResultTitle = e.target.value;
        }else if(type==='singleResultTitle'){
          data.resultTitle.singleResultTitle = e.target.value;
        } else{
          data[type] = e.target.value;
        }
      }else{
        data[type] = e;
      }
      if(type==='apiId'){
        getApiDetail(e);
      }
      updata(data);
    };

    updataMapping =(e,index,type)=>{
      const {data,updata,updataField} = this.props;
      data.mapping[index][type]=e;
      if(type === 'fieldType'){
        data.mapping[index].apiField='';
      }
      updata(data);
    };

    delMappingItemByIndex=(index)=>{
      const {data,updata} = this.props;
      data.mapping.splice(index,1);
      updata(data);
    };

  getEditContent=()=>{
    return  this.refs['resultTemplate'].getUeditorContent();
  };

    render() {
      const { apiData,dialogs,data,fields } = this.props;
      const apiOptElem = apiData.map((item) => this.forMapSlotsOption(item, 'api'));
      const SlotOpElem = dialogs.map((item,idx)=>this.forMapSlotsOption(item,'slot'));
      // const fieldOptElem = fields.map((item,idx)=>this.forMapSlotsOption(item,'field'));
      const columns=[
            {
                title: '词槽',
                dataIndex: 'slotId',
                key: 'slotId',
                width:'120px',
                render: (text,record,index)=>{
                  return(
                    <Select style={{ width: 120 }} placeholder="请选择" value={record.slotId} onChange={(e)=>this.updataMapping(e,index,'slotId')}>
                      {SlotOpElem}
                    </Select>
                  )
                },
            },
            {
                title: 'API字段',
                dataIndex: 'apiField',
                key: 'apiField',
                render: (text,record,index)=>{
                  return(
                   <div>
                     <Select style={{ width: 150 }} value={record.fieldType} placeholder="请选择" onChange={(e)=>this.updataMapping(e,index,'fieldType')}>
                       <Option key="request" value="request">请求字段</Option>
                       <Option key="response" value="response">返回字段</Option>
                     </Select>
                     -
                     <Select style={{ width: 150 }} placeholder="请选择" value={record.apiField}  onChange={(e)=>this.updataMapping(e,index,'apiField')}>
                       {/*{fieldOptElem}*/}
                       {
                         record.fieldType === 'request'?
                           fields.requestFields.map((item,idx)=>this.forMapSlotsOption(item,'field')):
                           fields.responseFields.map((item,idx)=>this.forMapSlotsOption(item,'field'))
                       }
                     </Select>
                   </div>
                  )
                },
            },
            {
                title: '操作',
                width:'120px',
                render: (text, record, index) => <Button icon="delete" type="danger" onClick={()=>this.delMappingItemByIndex(index)}>删除</Button>
            }]
        return (
            <GridContent>
                <Suspense fallback={<PageLoading />}>
                    <Row>
                        <Col span={2} style={{ marginLeft: 5 }}>
                            查询数据来源
                        </Col>
                        <Col span={3} style={{ textAlign:'left' }}>
                            <Radio checked>自定义API接口</Radio>
                        </Col>
                        <Col span={10}>
                            <Select placeholder="请选择" value={data.apiId} className={styles.selectItem} onChange={(e)=>this.setValueByChange(e,'apiId')}>
                                {apiOptElem}
                            </Select>
                        </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={6} style={{ textAlign:'left' }}>词槽-字段对应</Col>
                      <Col style={{marginTop:40}}>
                        <Table columns={columns} dataSource={data.mapping} bordered pagination={false} />
                        <Button type="primary" htmlType='button' icon="plus" onClick={()=>this.addTableData()} style={{marginTop:20}}>添加</Button>
                      </Col>
                      <Col style={{marginTop:20}}>
                        <span style={{marginRight:10}}>唯一性词槽</span>
                        <Select style={{ width: 120 ,marginRight:10}} placeholder="请选择" value={data.uniqueSlot} onChange={(e)=>this.setValueByChange(e,'uniqueSlot')}>
                          {SlotOpElem}
                        </Select>
                        <Input value={data.field} onChange={(e)=>this.setValueByChange(e,'field',true)} style={{width:200,marginRight:10}} />
                      </Col>
                      <Col span={22} style={{ marginLeft: 10,marginTop:20 }}>结果展示模版</Col>
                    </Row>
                    <Row style={{marginTop:20}}>
                      <Col span={3} style={{marginTop:5}}>
                        结果展示话术
                      </Col>
                      <Col span={20}>
                        <Input value={data.resultTitle.multiResultTitle} onChange={(e)=>this.setValueByChange(e,'multiResultTitle',true)} style={{width:500,marginRight:10}} />
                      </Col>
                    </Row>
                    <Row style={{marginTop:20}}>
                      <Editor content={data.resultTemplate} name='resultTemplate' id='resultTemplate' ref='resultTemplate' />
                    </Row>
                  <Row style={{marginTop:20}}>
                    <Col span={22} style={{ borderLeft: "3px solid #222", paddingLeft: 10}}>特殊情况处理</Col>
                  </Row>
                  <Row>
                    <Col span={4} style={{marginTop:20}}>
                      只有一条筛选结果时
                    </Col>
                    <Col span={19} style={{marginTop:20}}>
                      <Radio.Group onChange={(e)=>this.setValueByChange(e,'filter',true)} value={data.filter}>
                        <Radio value="keep_on">不结束筛选继续询问</Radio>
                        <Radio value="select_first_then_exit">直接选中该结果，并结束询问</Radio>
                      </Radio.Group>
                    </Col>
                    {
                      data.filter === 'keep_on'?
                        <Col span={20} offset={4}>
                         询问话术 <Input value={data.resultTitle.singleResultTitle} onChange={(e)=>this.setValueByChange(e,'singleResultTitle',true)} style={{width:500,marginRight:20,marginTop:10}} />
                        </Col>
                        :''
                    }
                  </Row>
                  <Row>
                    <Col span={3} style={{marginTop:20}}>
                      筛选无结果时
                    </Col>
                    <Col span={19} offset={1} style={{marginTop:20}}>
                      <Radio.Group onChange={(e)=>this.setValueByChange(e,'noResFilter',true)} value={data.noResFilter}>
                        <Radio value="keep_on">不结束筛选继续询问</Radio>
                        <Radio value="direct_exit">直接结束筛选</Radio>
                      </Radio.Group>
                    </Col>
                    {
                      data.noResFilter === 'keep_on'?
                        <Col span={20} offset={4}>
                          询问话术 <Input value={data.noResultTitle} onChange={(e)=>this.setValueByChange(e,'noResultTitle',true)} style={{width:500,marginRight:20,marginTop:10}} />
                        </Col>
                        :''
                    }
                  </Row>
                </Suspense>
            </GridContent>
        );
    }
}
export default connect(({ user }) => ({
    currentUser: user.currentUser
}))(Form.create()(Item));
